<script setup lang="ts">
// 正常头部不传type
// level_1 左侧头像加文字 必传 type：level_1  name/avatar
// level_2 文字加背景图 必传 type：level_2  name
// level_3 左侧头像加箭头加文字加透明 必传 type：level_3  name/avatar

interface IProps {
  type?: "level_1" | "level_2" | "level_3" | "";
  name?: string;
  avatar?: string;
  nameColor?: string;
  arrowColor?: string;
  isBg?: boolean;
  placeholder?: boolean;
  fixed?: boolean;
}

const props = withDefaults(defineProps<IProps>(), {
  type: "",
  name: "名称",
  nameColor: "#333",
  avatar:
    "https://wealth-1311286543.cos.ap-guangzhou.myqcloud.com/taoshe/static/shop/Ellipse232.png",
  arrowColor: "#333",
  isBg: false,
  placeholder: true,
  fixed: true
});

const leftClick = () => {
  uni.navigateBack({
    delta: 1
  });
};

const defaultLeftClick = () => {
  if (props.type === "") {
    leftClick();
  }
};
</script>

<template>
  <view :class="[{ homeBg: isBg }]">
    <uv-navbar
      placeholder:placeholder
      :fixed="fixed"
      :title="!type ? name : ''"
      :class="['navbar', { filter: type !== 'level_3' }]"
      :bgColor="type === 'level_3' || isBg ? 'transparent' : '#FFFFFFE5'"
      @leftClick="defaultLeftClick"
    >
      <!-- 左侧头像名称/level_1/level_3 -->
      <template v-slot:left>
        <view class="slotLeft1" v-if="type === 'level_1' || type === 'level_3'">
          <uv-icon
            @click="leftClick"
            class="arrowIcon"
            name="arrow-left"
            size="19"
            :color="arrowColor"
            customStyle="margin-right: 30rpx;"
          ></uv-icon>
          <uv-avatar size="38" mode="widthFix" :src="avatar"></uv-avatar>
          <text class="text" :style="{ color: nameColor }">{{ name }}</text>
        </view>
        <view class="slotLeft2" v-if="type === 'level_2'">
          <text class="text">{{ name }}</text>
          <image
            class="positionImg"
            src="https://wealth-1311286543.cos.ap-guangzhou.myqcloud.com/taoshe/static/shop/Ellipse233.png"
            alt=""
            srcset=""
          />
        </view>
      </template>
      <!-- 正常 -->
      <!-- <template  v-slot:left>
            <view class="slotLeft2">
                <text class="text">{{ name }}</text>
                <img class="positionImg" src="../../static/shop/Ellipse233.png" alt="" srcset="">
            </view>
        </template> -->
    </uv-navbar>
  </view>
</template>

<style lang="scss" scoped>
.homeBg {
  background-image: url("https://wealth-1311286543.cos.ap-guangzhou.myqcloud.com/taoshe/static/Group47624.png");
  // height: 180px;
  background-repeat: no-repeat;
  position: relative;
  width: 100%;
  background-size: 100% 100%;
  // z-index: 1;
  // margin-bottom: -126px;
}
.filter {
  :deep(.uv-navbar__content) {
    backdrop-filter: blur(20px);
  }
}

.slotLeft1 {
  display: flex;
  align-items: center;
}

.text {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0px;
  color: #333;
  padding-left: 10px;
}

.slotLeft2 {
  position: relative;

  // background-image: url('../../static/shop/Ellipse233.png');
  // background-size: cover;
  // background-position: center center;
  .positionImg {
    // z-index: -1;
    position: absolute;
    bottom: -8px;
    left: 7px;
    width: 80rpx;
    height: 25rpx;
    z-index: -1;
  }
}
</style>
